<template>
  <!-- 流程历史任务 -->
  <div>
    <ProTable :columns="columns" :data="list" row-key="id" :tool-button="false" :pagination="false">
      <template #zhipai="scope">
        <!-- 规则1 -->
        <div v-if="scope.$index == 0">
          <span class="color-red">（{{ scope.row.activityName }}）{{ scope.row.assignee }}</span>
          <span>启动流程</span>
        </div>
        <!-- 规则2 -->
        <div v-else>
          <span class="color-red">（{{ scope.row.activityName }}）{{ scope.row.assignee }}</span>
          <span>启动流程,同时执行动作</span>
          <span class="color-green">{{ scope.row.outcome }}</span>
          <span>将任务发送给</span>
          <span class="color-red">（{{ scope.row.activityName }}）{{ scope.row.assignee }}</span>
        </div>
      </template>
    </ProTable>
  </div>
</template>
<script setup lang="ts" name="ProcessHistoryTasksBox">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { findHistoryTask } from "@/api/modules/common";

// 表格配置项
const columns = reactive([
  { prop: "id", label: "ID", width: 100 },
  { prop: "createTime", label: "创建时间", width: 180 },
  { prop: "zhipai", label: "指派", align: "left" }
]);

const list = ref<any[]>([]); // 流程历史记录

const props = defineProps({
  pid: Number || String
});

const loading = ref(true);

findHistoryTask({
  pid: props.pid
})
  .then((res: any) => {
    list.value = res.data || [];
    loading.value = false;
  })
  .catch(() => {
    loading.value = false;
  });
</script>

<style scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
.color-red {
  color: #ff0000;
}
.color-green {
  color: #00dd00;
}
</style>
